<template>
	<view class="contaier">
		<u-navbar title="搜索" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<view class="my-input">
			<my-input @search="search" :value='searchVaule'></my-input>
		</view>
		<scroll-view :scroll-y="true" :style="'height:' + scrollH+'rpx;'">
			<view class="list-data">
				<view v-for="item in dataList" :key="item.id">
					<view class="list" @click="toDetail(item)">
						<image class="img" :src="item.image" mode="aspectFill"></image>
						<view class="right-box">
							<view class="right u-line-2">
								{{item.title}}
							</view>
							<view class="right-type">
								{{item.type_text}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<no-thing v-if="dataList.length==0"></no-thing>
		</scroll-view>
	</view>
</template>

<script>
	import myInput from '../components/my-input.vue'
	export default {
		components: {
			myInput,
		},
		data() {
			return {
				dataList: [],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				searchVaule: '',
				page: 1,
				baseUrl: this.$u.http.config.baseUrl,
				scrollH:0
			}
		},
		onReachBottom() {
			this.page++
			this.toSearch()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - 200;
					// #endif
				}
			});
		},
		methods: {
			search(value) {
				console.log('aaaa',value)
				this.searchVaule = value
				this.dataList = []
				this.toSearch()
			},
			toSearch() {
				if (!this.searchVaule) {
					return
				}
				let quaryData = {
					page: this.page,
					limit: 15,
					keyword: this.searchVaule
				}
				// 1军师，
				this.$u.api.getJunshiTeamList(quaryData).then(res => {
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image: item.cover_image || item.image,
							title: item.name || item.title,
							type_text: "军师",
							type: "junshi",
							media_type: item.type || -1
						}
						this.dataList.push(data)
					})
				})
				// 2经典案例，
				this.$u.api.getCase(quaryData).then(res => {
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image:(item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "经典案例",
							type: "case",
							media_type: item.type || -1
						}
						this.dataList.push(data)
					})
				})
				// 3经验分享，
				this.$u.api.getShareList(quaryData).then(res => {
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image:(item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "经验分享",
							type: "share",
							media_type: item.type || -1
						}
						this.dataList.push(data)
					})
				})
				// 4主题讲座，
				this.$u.api.getLectureList(quaryData).then(res => {
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image: (item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "主题讲座",
							type: "lecture",
							media_type: item.type || -1
						}
						this.dataList.push(data)
					})
				})
				// 5直播回放，
				// this.$u.api.getLivebackList(quaryData).then(res => {
				// 	res.data.forEach(item => {
				// 		let data = {
				// 			id: item.id,
				// 			image: (item.image || item.cover_image),
				// 			title: item.name || item.title,
				// 			type_text: "直播回放",
				// 			type: "liveBack",
				// 			media_type: item.type || -1
				// 		}
				// 		this.dataList.push(data)
				// 	})
				// })
				// 6组长，
				this.$u.api.getGroupList(quaryData).then(res => {
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image: (item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "组长团队",
							type: "team",
							media_type: item.type || -1
						}
						this.dataList.push(data)
					})
				})
				// 7品牌故事，
				this.$u.api.BrandstoryList(quaryData).then(res => {
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image: (item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "品牌故事",
							type: "broandStory",
							media_type: item.type || -1
						}
						this.dataList.push(data)
					})
				})
				// 8课程
				this.$u.api.getClassList(quaryData).then(res => {
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image:(item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "课程",
							type: "class",
							media_type: item.type || -1
						}
						this.dataList.push(data)
					})
				})
				// 9 文章
				this.$u.api.getArticleList(quaryData).then(res=>{
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image: (item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "最新文章",
							type: "news",
							media_type: item.type || -1,
							url: item.url
						}
						this.dataList.push(data)
					})
				})
				this.$u.api.JournalismList(quaryData).then(res=>{
					res.data.forEach(item => {
						let data = {
							id: item.id,
							image:(item.image || item.cover_image),
							title: item.name || item.title,
							type_text: "新闻咨询",
							type: "Journa",
							media_type: item.type || -1,
							url: item.url
						}
						this.dataList.push(data)
					})
				})
			},
			toDetail(data) {
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
					return
				}
				if (data.type == 'junshi') {
					this.$u.route('/packageB/pages/junshiDetail/junshiDetail', {
						id: data.id
					})
				} else if (data.type == 'case' || data.type == 'share' || data.type == 'lecture' || data.type == 'Journa') {
					let vip = uni.getStorageSync('userinfo').vip
					if (vip) {
						this.$u.route('/packageB/pages/hostpotDetail/hostpotDetail', {
							id: data.id,
							title: data.title,
							pageType: data.type
						})
					} else {
						uni.showToast({
							title: '仅限会员观看',
							duration: 1000,
							icon: 'error',
						})
					}
				} else if (data.type === 'liveBack' || data.type === 'broandStory') {
					if (data.media_type == 0) {
						this.$u.route('/packageB/pages/videosDetail/hostpotDetail', {
							id: data.id,
							title: data.name,
							pageType: data.type
						})
					} else {
						this.$u.route('/packageB/pages/videosDetail/videosDetail', {
							id: data.id,
							title: data.name,
							pageType: data.type
						})
					}
				} else if (data.type === 'team') {
					this.$u.route('/packageB/pages/groupDetail/groupDetail', {
						id: data.id
					})
				} else if (data.type === 'class') {
					this.$u.route('/packageB/pages/hotClassDetail/hotClassDetail', {
						id: data.id
					})
				} else if(data.type === 'news') {
					this.$u.route('/packageB/pages/about/about', {
						url: encodeURIComponent(data.url),
						title: data.title
					})
				}
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				// this.getOrderList(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style lang="scss">
	.contaier {
		width: 100%;
		// text-align: center;

		.nodata {
			width: 600rpx;
			height: 400rpx;
			margin: 200rpx auto;
		}
	}

	.container {
		margin: 0 auto;
		position: relative;
	}

	.my-input {
		width: 100%;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
		padding: 20rpx;
	}

	.swiper-item {
		margin: 0 auto;
		height: 100%;
	}

	.list-data {
		// margin-top: 90rpx;
		padding-bottom: 40rpx;

		.list {
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
			display: flex;

			.img {
				height: 150rpx;
				width: 150rpx;
				border-radius: 20rpx;
			}

			.right-box {
				margin-left: 20rpx;

				.right {
					width: 490rpx;
					height: 110rpx;
					font-weight: 700;
				}

				.right-type {
					color: #ccc;
				}
			}
		}
	}
</style>
